import React, { useRef, useState, useEffect } from 'react'

export default function App() {
  const [color, setColor] = useState('#00ff00')
  const [isDraw, setIsDraw] = useState(false)
  const [start, setStart] = useState({})
  const [end, setEnd] = useState({})
  const [rects, setRects] = useState([])
  const [canvasOffset, setCanvasOffset] = useState({})
  const canvasRef = useRef(null)



  useEffect(() => {

    const ctx = canvasRef.current.getContext('2d')
    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height)
    ctx.beginPath();
    ctx.lineWidth = "1";
    ctx.strokeStyle = color;
    if (rects == '') {
      return
    }

    rects.map(rect => {
      ctx.strokeRect(...rect.rect);
    })

  }, [rects])

  const mouseEvent = (e) => {
    let canvas = e.target
    let ctx = canvas.getContext('2d')
    let id = 1
    const left = canvas.getBoundingClientRect().left
    const top = canvas.getBoundingClientRect().top

    setCanvasOffset({
      left, top
    })
    e.persist()

    if (e.type === 'mousedown') {

      if (rects.length > 31) {
        return
      }
      setIsDraw(true)
      setStart({ x: e.pageX - left, y: e.pageY - top })
    }
    if (e.type === 'mousemove' && isDraw) {
      setEnd({ x: e.pageX - left, y: e.pageY - top })


      ctx.clearRect(0, 0, canvas.width, canvas.height)
      ctx.beginPath();
      ctx.lineWidth = "1";
      ctx.strokeStyle = color;
      ctx.strokeRect(start.x, start.y, end.x - start.x, end.y - start.y);
      // ctx.font = '30px'
      // ctx.fillText('nihao', start.x + 20, start.y + 20, end.x - start.x)
      // rects.map(rect => {
      //   ctx.strokeRect(...rect.rect);
      //   ctx.font = '30px'
      //   ctx.fillText(rect.text, rect.rect[0] + 20, rect.rect[1] + 20, rect.rect[1] - rect.rect[0])
      // })


    }
    if (e.type === 'mouseup') {
      setIsDraw(false)
      if (rects.length > 31) {
        return
      }


      if (start.x > end.x) {
        setRects([...rects, {
          id: rects.length + 1, start, end,
          rect: [end.x, end.y, Math.abs(end.x - start.x), Math.abs(end.y - start.y)],
          color, text: 'nihao'
        }])

      } else {
        setRects([...rects, {
          id: rects.length + 1, start, end,
          rect: [start.x, start.y, Math.abs(end.x - start.x), Math.abs(end.y - start.y)],
          color, text: 'nihao'
        }])
      }


    }
  }


  const deleteArea = (id) => {
    const newRects = rects.filter(rect => rect.id != id)
    console.log(newRects);
    setRects(newRects)
  }

  return (
    <div style={{ position: 'relative' }}>


      <canvas
        ref={canvasRef}
        height="400px" width="800px"
        style={{ border: '1px solid black', margin: '100px 100px' }}
        onMouseDown={mouseEvent}
        onMouseMove={mouseEvent}
        onMouseUp={mouseEvent}
      >

      </canvas>

      {
        rects.map(item => <button
          key={item.id}

          onClick={() => deleteArea(item.id)}

        >删除{item.id}</button>)
      }


      {
        rects.map(item => <p key={item.id} style={{
          position: 'absolute',
          margin: '0',
          left: `${item.rect[0] + canvasOffset.left}px`,
          top: `${item.rect[1] + canvasOffset.top}px`,
          width: `${item.rect[2]}px`,
          height: `${item.rect[3]}px`,
          lineHeight: `${item.rect[3]}px`,
          fontSize: `${item.rect[3] / 2}px`,
          overflow: 'hidden',
          paddingLeft: '10px',
          boxSizing: 'border-box'
        }}
        >世界如此撒打算大</p>)
      }


      <div width={'-100px'}></div>
    </div>
  )
}
